<template>
  <van-swipe class="base-swipe" v-bind="$attrs" :autoplay="autoplay">
    <van-swipe-item v-for="(item, index) in data" :key="index">
      <a :href="item.url">
        <img :src="item.pic" alt="">
      </a>
    </van-swipe-item>
  </van-swipe>
</template>

<script>
import { Swipe, SwipeItem } from 'vant'

export default {
  name: 'BaseSwipe',
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem
  },

  props: {
    data: {
      type: Array,
      default: () => []
    },
    autoplay: {
      type: [String, Number],
      default: 4000
    }
  },
  data () {
    return {}
  }
}
</script>

<style scoped lang="less">
.base-swipe {
  a {
    display: block;
    font-size: 0;

    img {
      width: 100%;
      height: 321px;
      background-size: cover;
    }
  }
}
</style>
